@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>@ViewBag.Title</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/plugins/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css" media="all">
  <link href="/build/css/ztree/metro/ztree.css" rel="stylesheet" />
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <style>
    /** 滚动条 
    ::-webkit-scrollbar{width: 10px; height: 10px;}
    ::-webkit-scrollbar-button:vertical{display: none;}
    ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner{background-color: #e2e2e2;}
    ::-webkit-scrollbar-thumb{border-radius: 0; background-color: rgba(0,0,0,.3);}
    ::-webkit-scrollbar-thumb:vertical:hover{background-color: rgba(0,0,0,.35);}
    ::-webkit-scrollbar-thumb:vertical:active{background-color: rgba(0,0,0,.38);}**/
  </style>
</head>
<body>
<div class="kit-table" style="padding:0px;padding-top: 5px;">
    <div class="" style="width:225px;float:left;padding:5px;">
        <a href="javascript:;" class="layui-btn layui-btn-xs" id="add" style="width:100%;"><i class="layui-icon">&#xe608;</i></a>
        <ul id="ztree" class="ztree itemtree" style="background-color: #f2f2f2; padding-bottom:15px;
        position: fixed;
    top: 30px;
    padding-top: 0px;
    padding-right: 0px;
    bottom: 0;
    z-index: 999;
    width: 220px;
    overflow-x: hidden;"></ul>
    </div>
    <div class="" style="width:calc(100% - 235px);float:right;">
        <table class="layui-table" style="margin:5px 0;">
            <colgroup>
                <col width="150">
                <col>
            </colgroup>
            <thead>
                <tr>
                    <td colspan="2">节点详情</td>
                </tr>
            </thead>
            <tbody id="detail">
                <tr>
                    <td colspan="2">点击左侧节点查看详情.</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="layui-clear"></div>
</div>
<script type="text/html" id="edit-tpl">
    <div style="margin:10px">
        <form class="layui-form" lay-filter="form-edit">
            <input type="hidden" name="Id" value="{{d.Id}}" />
            <div class="layui-form-item" style="position:relative;">
                <label class="layui-form-label">上级节点</label>
                <div class="layui-input-inline">
                    <input type="text" name="Pid" id="Pid" disabled="disabled" data-id="{{ d.Pid }}" value="{{d.PidName}}" class="layui-input">
                    <div id="departmentContent" class="departmentContent layui-anim layui-anim-upbit" 
                         style="display:none; position: absolute;z-index:9;background-color:white; width:100%;box-shadow:0px 3px 5px 0px #ccc;">
                        <ul id="treeDemo" class="ztree" style="margin-top:0;padding-bottom:10px;"></ul>
                    </div>
                </div>
                <div class="layui-form-mid layui-word-aux" style="padding:7px 0!important;">
                    <a href="javascript:;" class="layui-btn layui-btn-sm" id="select-department">选择节点</a>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">节点名称</label>
                <div class="layui-input-block">
                    <input type="text" name="Title" required lay-verify="required" value="{{d.Title}}" placeholder="请输入节点名称." autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">节点图标</label>
                <div class="layui-input-inline">
                    <input type="text" name="Icon" required lay-verify="required" value="{{ d.Icon }}" placeholder="请输入图标代码." autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                        <span style="color:red;"><a href="http://fontawesome.io/icons/" target="_blank">点击选择图标</a></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">模块</label>
                <div class="layui-input-block">
                    <input type="text" name="App" value="{{d.App}}" placeholder="请输入模块名称." autocomplete="off" class="layui-input">
                </div>
                
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">控制器</label>
                <div class="layui-input-block">
                    <input type="text" name="Controller" value="{{d.Controller}}" placeholder="请输入控制器名称." autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">方法</label>
                <div class="layui-input-block">
                    <input type="text" name="Action" value="{{d.Action}}" placeholder="请输入方法名称." autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-inline">
                        <input type="number" name="Sort" required lay-verify="required" value="{{d.Sort}}" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span style="color:red;">值越大越靠前.</span>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">是否是菜单</label>
                <div class="layui-input-inline">
                    {{# var disable = parseInt(d.Type) === 0?'checked':'';}} {{# var enable = parseInt(d.Type) === 1?'checked':'';}}
                    <input type="radio" name="Type" value="1" title="菜单" {{enable}} />
                    <input type="radio" name="Type" value="0" title="非菜单" {{disable}} />
                </div>
                <div class="layui-form-mid layui-word-aux">
                        <span style="color:red;">选择非菜单则不显示</span>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="Remark" placeholder="请输入备注信息." class="layui-textarea">{{d.Remark}}</textarea>
                </div>
            </div>
            <div class="layui-form-item" style="display:none;">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formEdit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</script>
<script type="text/html" id="iconTpl">
    {{# if(d.Icon){ }}
    {{# if(d.Icon.indexOf('fa-') !== -1) { }}
    <i class="fa {{ d.icon }}" aria-hidden="true"></i>
    {{# } else { }}
    <i class="layui-icon">{{ d.Icon }}</i>'
    {{# } }}
    {{# } }}
</script>
<script type="text/html" id="detailTpl">
    <tr>
        <td style="text-align:right;">节点名称</td>
        <td>{{d.Title}}</td>
    </tr>
    <tr>
        <td style="text-align:right;">节点图标</td>
        <!-- <td>{{ d.Icon.substring(1) }}</td> -->
        <td>
            {{# if(d.Icon){ }}
                {{# if (d.Icon.indexOf('fa-') !== -1) { }}
                <i class="fa {{ d.Icon }}" aria-hidden="true"></i>
                {{# } else { }}
                <i class="layui-icon">{{ d.Icon }}</i>
                {{# } }}
            {{# } }}
        </td>
    </tr>
    <tr>
        <td style="text-align:right;">模块</td>
        <td>{{d.App}}</td>
    </tr>
    <tr>
        <td style="text-align:right;">控制器</td>
        <td>{{d.Controller}}</td>
    </tr>
    <tr>
        <td style="text-align:right;">方法</td>
        <td>{{d.Action}}</td>
    </tr>
        <tr>
        <td style="text-align:right;">排序值</td>
        <td>{{d.Sort}}</td>
    </tr>
    <tr>
        <td style="text-align:right;">是否是菜单</td>
        <td>
            {{# if (d.Type == 1) { }}
            是
            {{# } else { }}
            否
            {{# } }}
        </td>
    </tr>
    <tr>
        <td style="text-align:right;">备注</td>
        <td>{{d.Remark}}</td>
    </tr>
</script>
<script src="/plugins/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.config({
        base: '/build/js/'
    }).use(['jquery', 'layer', 'ztree','laytpl','form','divscroll'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            laytpl = layui.laytpl,
            utils = layui.utils,
            _body = $('body');
        $('.itemtree').perfectScrollbar();
        var departments =[];// [{"ID":21,"Name":"部门1-1-2"},{"ID":1,"Name":"总经办"},{"ID":5,"Name":"财务部"},{"ID":6,"Name":"子公司一"},{"ID":7,"Name":"运营部"},{"ID":8,"Name":"客服部"},{"ID":9,"Name":"子公司二"},{"ID":10,"Name":"技术部一"},{"ID":11,"Name":"技术部二"},{"ID":12,"Name":"客服一部"},{"ID":13,"Name":"客服二部"},{"ID":14,"Name":"技术部"},{"ID":15,"Name":"技术部三"},{"ID":16,"Name":"公司二"},{"ID":17,"Name":"部门1"},{"ID":18,"Name":"部门1-1"},{"ID":20,"Name":"部门1-2"}];
        var zNodes = [];//[{"id":1,"name":"总经办","children":[{"id":5,"name":"财务部","children":null,"isParent":false,"open":true},{"id":6,"name":"权限管理","children":[{"id":7,"name":"运营部","children":null,"isParent":false,"open":true},{"id":8,"name":"客服部","children":[{"id":12,"name":"客服一部","children":null,"isParent":false,"open":true},{"id":13,"name":"客服二部","children":null,"isParent":false,"open":true}],"isParent":false,"open":true},{"id":14,"name":"技术部","children":null,"isParent":false,"open":true}],"isParent":false,"open":true},{"id":9,"name":"子公司二","children":[{"id":10,"name":"技术部一","children":null,"isParent":false,"open":true},{"id":11,"name":"技术部二","children":null,"isParent":false,"open":true},{"id":15,"name":"技术部三","children":null,"isParent":false,"open":true}],"isParent":false,"open":true}],"isParent":false,"open":true},{"id":16,"name":"公司二","children":[{"id":17,"name":"部门1","children":[{"id":18,"name":"部门1-1","children":[{"id":21,"name":"部门1-1-2","children":null,"isParent":false,"open":true}],"isParent":false,"open":true},{"id":20,"name":"部门1-2","children":null,"isParent":false,"open":true}],"isParent":false,"open":true}],"isParent":false,"open":true}];
        $.ajax({
            url: '/Admin/Node/Index',
            type: 'get',
            data: {},
            success: function (data, textStatus) {
                if (textStatus == 'success') {
                    zNodes = data.Data;
                    console.log(zNodes);
                    //初始化
                    var treeObj =$.fn.zTree.init($("#ztree"), setting, zNodes);
                    treeObj.expandAll(true);
                }
            }
        });
        //console.log(zNodes);
        $('#add').on('click', function () {
            save('add');
        });
        var editIndex, loadIndex;
        form.on('submit(formEdit)', function (data) {
            //loadIndex = utils.load(2);
            var url = data.field.Id === '0' ? '/Admin/Node/Add' : '/Admin/Node/Edit';
            var retype = data.field.Id === '0' ? 'post' : 'put';
            data.field.Pid = $('#Pid').data('id');
            //$.post(url, data.field, function (res) {
            //    //loadIndex && layer.close(loadIndex);
            //    layer.msg(res.msg);
            //    if (res.rel) {
            //        editIndex && layer.close(editIndex); //关闭弹出层
            //    }
            //});
            //向服务端发送指令
            $.ajax({
                url: url,
                type: retype,
                data: data.field,
                success: function (data, textStatus) {
                    layer.msg(data.Message);
                    if (textStatus == 'success') {
                        editIndex && layer.close(editIndex); //关闭弹出层
                    }
                }
            });
            return false;
        });
        /**
         * 新增,修改节点
         */
        function save(action, data) {
            var defaults= {
                Id: 0,
                Title: '',
                Icon: '',
                App: '',
                Controller: '',
                Action: '',
                Remark: '',
                Type: 0,
                //departments: departments,
                Sort: 0,
                Pid: 0,
                PidName:'后台应用'
            };
            $.extend(true, defaults, data);
            var title = action === 'add' ? '<i class="layui-icon">&#xe608;</i> 新增节点':'编辑节点';
            //渲染
            laytpl($('#edit-tpl').html()).render(defaults,function (html) {
                    layer.open({
                        type: 1,
                        title: title,
                        content: html,
                        area: ['600px', '400px'],
                        btn: ['提交', '重置', '取消'],
                        yes: function (index, layero) {
                            editIndex = index;
                            $('form[lay-filter="form-edit"]').find('button[lay-submit]').click();
                        },
                        btn2: function (index, layero) {
                            $('form[lay-filter="form-edit"]').find('button[type="reset"]').click();
                            return false;
                        },
                        success: function () {
                            form.render(null, 'form-edit');
                            bindSelectedDepartmentEvent();
                        }
                    });
                });
        }
        
        
        var setting = {
            data:{
                key:{
                    //name:"title"
                }
            },
            view: {
                //showIcon: false,
                addHoverDom: function (treeId, treeNode) {
                    var _obj = $("#" + treeNode.tId + "_span");
                    if (treeNode.editNameFlag || $("#kit-tree-add-" + treeNode.tId).length > 0)
                        return;
                    var htm = "<span class='button add' id='kit-tree-add-" + treeNode.tId + "' title='新增节点' onfocus='this.blur();'></span>";
                    _obj.after(htm);
                    var btn = $("#kit-tree-add-" + treeNode.tId);
                    if (btn) {
                        btn.bind("click", function () {
                            save('add', {
                                parentId: treeNode.id,
                                parentName: treeNode.name
                            });
                            return false;
                        });
                    }
                },
                removeHoverDom: function (treeId, treeNode) {
                    $("#kit-tree-add-" + treeNode.tId).unbind().remove();
                },
                selectedMulti: false
            },
            edit: {
                enable: true,
                renameTitle: '编辑节点',
                removeTitle: '删除节点'
            },
            callback: {
                onClick: function (e, treeId, treeNode) {
                    $.get('/Admin/Node/Edit', { Id: treeNode.id }, function (res) {
                        if (res.Result) {
                            laytpl($('#detailTpl').html()).render(res.Data, function (html) {
                                $('#detail').html(html);
                            });
                        } else {
                            layer.msg(res.Message);
                        }
                    });
                },
                beforeEditName: function (treeId, treeNode) {
                    $.get('/Admin/Node/Edit', { Id: treeNode.id }, function (res) {
                        if (res.Result) {
                            var d = res.Data;
                            d.departments = departments;
                            d.parentName = treeNode.name;
                            save('edit',d)
                        } else {
                            layer.msg(res.Message);
                        }
                    });
                    return false;
                },
                beforeRemove: function (treeId, treeNode) {
                    layer.confirm('确定要删除 <span style="color:red;">' + treeNode.name + '</span> 么?', { title: '系统提示' }, function (index) {
                        layer.close(index);
                        //loadIndex = utils.load(2);
                        //$.post('/Department/Delete', { id: treeNode.id }, function (res) {
                        //    //loadIndex && layer.close(loadIndex);
                        //    layer.msg(res.msg);
                        //    if (res.rel) {
                        //        var zTree = $.fn.zTree.getZTreeObj("ztree");
                        //        zTree.removeNode(treeNode);
                        //   }
                        //
                        //向服务端发送指令
                        $.ajax({
                            url: '/Admin/Node/Del',
                            type: 'Delete',
                            data: { id: treeNode.id },
                            success: function (data, textStatus) {
                                layer.msg(data.Message);
                                editIndex && layer.close(editIndex); //关闭弹出层
                                if (textStatus == 'success') {
                                    if(data.Result){
                                        var zTree = $.fn.zTree.getZTreeObj("ztree");
                                        zTree.removeNode(treeNode);
                                    }
                                }
                            }
                        });
                    });
                    return false;
                }
            }
        };
        //初始化
        //$.fn.zTree.init($("#ztree"), setting, zNodes);
        //绑定选择节点相关事件
        function bindSelectedDepartmentEvent() {

            $('#select-department').off('click').on('click', function () {
                showDepartment();
            });
            var setting = {
                data: {
                    key:{
                        //name:"title"
                    }
                },
                view: {
                    dblClickExpand: false
                },
                callback: {
                    onClick: onClick
                }
            };
            function onClick(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                    nodes = zTree.getSelectedNodes(),
                    v = "";
                nodes.sort(function compare(a, b) { return a.id - b.id; });
                for (var i = 0, l = nodes.length; i < l; i++) {
                    v += nodes[i].name + ",";
                }
                if (v.length > 0) v = v.substring(0, v.length - 1);
                var _parentId = $("#Pid");
                _parentId.attr("value", v);
                _parentId.attr("data-id", treeNode.id);
                hideDepartment();
            }

            function showDepartment() {
                $("#departmentContent").show();
                _body.on("mousedown", onBodyDown);
            }
            function hideDepartment() {
                $("#departmentContent").fadeOut('fast');
                _body.off("mousedown", onBodyDown);
            }
            function onBodyDown(event) {
                if (!(event.target.id == "select-department" || event.target.id == "departmentContent" || $(event.target).parents("#departmentContent").length > 0)) {
                    hideDepartment();
                }
            }

            var treeObjx = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            treeObjx.expandAll(true);
        }
    });
</script>
</body>
</html>